<template>
  <div class="Cinemas" v-if="Content">
    <van-nav-bar :title="CinemasData.cinemaName" left-arrow @click-left="onClickLeft" />
    <van-swipe class="my-swipe" indicator-color="white" :show-indicators="false" :loop="false">
      <van-swipe-item v-for="(ele,index) in CinemasData.movies" :key="index" :loop="false">
        <div class="swiper-img">
          <img :src="ele.img" width="150px" height="200px" />
        </div>
        <div class="movie-info-container">
          <div class="movie-title">
            <div class="title">
              {{ele.nm}}
              <span class="sc">
                {{ele.sc}}
                <span class="small">分</span>
              </span>
            </div>
            <div class="movie-desc">{{ele.desc}}</div>
          </div>
        </div>
        <div class="show-wrap">
          <van-tabs v-model="active" sticky animated swipeable>
            <van-tab :title="item.showDate" v-for="(item,i) in ele.shows" :key="i">
              <div class="show-item" v-for="(e,i2) in item.plist" :key="i2">
                <div class="time-block">
                  <div class="begin">{{e.tm}}</div>
                </div>
                <div class="info-block">
                  <div class="lan">{{e.lang}} {{e.tp}}</div>
                  <div class="hall">{{e.th}}</div>
                </div>
                <div class="price">￥{{e.baseSellPrice}}</div>
                <div
                  class="button-block"
                  @touchend="GoBuy(CinemasData.cinemaName,e.baseSellPrice)"
                >购票</div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  name: "Cinemas",
  data() {
    return {
      active: 0,
      CinemasData: [],
      Content: false,
      CityId: 1
    };
  },
  created() {
    if (localStorage.getItem("historyCity")) {
      this.CityId = JSON.parse(localStorage.getItem("historyCity")).cityid;
    }
    this.GetCinemasById(this.$route.params.cinemaId);
  },
  watch: {
    CinemasData() {
      this.Content = true;
    }
  },
  mounted() {},
  methods: {
    onClickLeft() {
      history.back();
    },
    GetCinemasById(cinemaId) {
      this.axios({
        method: "get",
        url: "cinema/shows",
        params: {
          cinemaId: cinemaId,
          ci: this.CityId
        }
      }).then(ref => {
        // console.log(ref.data.data);
        this.CinemasData = ref.data.data;
      });
    },
    GoBuy(MovieName, price) {
      this.$router.push({ name: "SelectSeat", params: { MovieName, price } });
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #e4393c;
  .van-icon {
    color: #eee;
  }
  .van-nav-bar__title {
    color: #eee;
  }
}
.swiper-img {
  margin-top: 20px;
  text-align: center;
}
.movie-info-container {
  text-align: center;
  .movie-title {
    .title {
      font-size: 17px;
      color: #333;
      font-weight: 700;
      .sc {
        color: #ffb400;
        font-size: 16px;
        .small {
          font-size: 12px;
        }
      }
    }
  }
}
.movie-desc {
  margin-top: 2px;
  height: 18.5px;
  line-height: 18.5px;
  font-size: 13px;
  color: #999;
}
.show-wrap {
  .show-item {
    padding: 17px 12.5px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(236, 235, 234);
    height: 60px;
    display: flex;
    .time-block {
      .begin {
        font-size: 20px;
        color: #333;
        line-height: 2;
        white-space: nowrap;
      }
    }
    .info-block {
      flex: 1;
      margin-left: 17px;
      -webkit-box-flex: 1;
      .lan {
        margin-top: 2px;
        line-height: 18px;
        font-size: 9px;
        color: #333;
        white-space: normal;
      }
      .hall {
        margin-top: 7px;
        font-size: 9px;
        color: #999;
        white-space: normal;
      }
    }
    .price {
      -webkit-box-flex: 0;
      -webkit-flex: 0 1 auto;
      flex: 0 1 auto;
      width: 2.46667rem;
      margin-left: 5px;
      line-height: 3;
      color: #f03d37;
      margin-top: 1px;
      font-size: 19px;
    }
    .button-block {
      width: 50px;
      height: 25px;
      line-height: 26px;
      margin-top: 25px;
      font-size: 12px;
      border: 1px solid #f06762;
      border-radius: 50px;
      color: #f03d37;
      text-align: center;
    }
  }
}
</style>